<template>
  <div class="exercise-records-wrapper">
    <div class="exercise-records-container">
      <!-- 返回按钮 -->
      <button @click="goBack" class="back-button">返回</button>
      <h3>运动记录</h3>
      <form @submit.prevent="submitExerciseRecord" class="exercise-form">
        <div class="form-group">
          <label>运动类型:</label>
          <input
            type="text"
            v-model="exerciseRecord.exerciseType"
            placeholder="请输入运动类型（如跑步、游泳）"
            required
          />
        </div>
        <div class="form-group">
          <label>运动时长 (HH:MM):</label>
          <input
            type="text"
            v-model="exerciseRecord.duration"
            placeholder="请输入运动时长（如 01:30）"
            required
          />
        </div>
        <div class="form-group">
          <label>消耗卡路里:</label>
          <input
            type="number"
            v-model="exerciseRecord.caloriesBurned"
            placeholder="请输入消耗的卡路里"
            required
          />
        </div>
        <button type="submit" class="submit-button">
          {{ isEditing ? '更新记录' : '提交记录' }}
        </button>
      </form>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: 'ExerciseRecords',
  data() {
    return {
      exerciseRecords: [], // 存储运动记录列表
      exerciseRecord: {
        id: null, // 用于更新记录
        exerciseType: '',
        duration: '',
        caloriesBurned: null,
      },
      isEditing: false, // 是否处于编辑模式
    };
  },
  methods: {
    // 重置表单
    goBack() {
      this.$router.go(-1); // 返回上一页
    },
    resetForm() {
      this.exerciseRecord = {
        id: null,
        exerciseType: '',
        duration: '',
        caloriesBurned: null,
      };
      this.isEditing = false; // 退出编辑模式
    },
    async submitExerciseRecord() {
      const token = localStorage.getItem('jwt'); // 从 localStorage 获取 token
      if (!token) {
        alert('请先登录');
        this.$router.push('/login'); // 跳转到登录页面
        return;
      }

      // 解析 JWT 令牌获取 userId
      const payload = JSON.parse(atob(token.split('.')[1]));
      const userId = payload.userId; // 获取 userId

      if (!userId) {
        alert('无法获取用户 ID，请重新登录');
        this.$router.push('/login');
        return;
      }

      // 将 userId 添加到提交的数据中
      this.exerciseRecord.userId = userId;

      try {
        const url = this.isEditing
          ? 'http://127.0.0.1:8080/api/login/home/exercise/update'
          : 'http://127.0.0.1:8080/api/login/home/exercise/add';

        const response = await axios.post(url, this.exerciseRecord, {
          headers: {
            Authorization: `Bearer ${token}`,
          },
        });

        if (response.data.flag) {
          alert(this.isEditing ? '运动记录更新成功！' : '运动记录提交成功！');
          this.resetForm(); // 重置表单

          // 跳转到运动计划界面，并传递运动类型
          this.$router.push({
            path: '/home/exercise-suggestions',
            query: { exerciseType: this.exerciseRecord.exerciseType },
          });
        } else {
          alert(`操作失败：${response.data.message}`);
        }
      } catch (error) {
        console.error('操作出错:', error);
        alert('操作出错，请稍后重试');
      }
    },
  },
};
</script>

<style scoped>
body, html {
  height: 100%;
  margin: 0;
  font-family: Arial, sans-serif;
  background-color: #f0f2f5;
}

.exercise-records-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; /* 使容器占满整个视口高度 */
  background-image: url('/background-image.jpg'); /* 添加背景图片 */
  background-size: cover; /* 背景图片覆盖整个容器 */
  background-position: center; /* 背景图片居中 */
  background-repeat: no-repeat; /* 背景图片不重复 */
}

.exercise-records-container {
  max-width: 800px; /* 增大容器宽度 */
  width: 90%; /* 使容器宽度自适应 */
  margin: 0 auto;
  padding: 40px; /* 增大内边距 */
  text-align: center;
  background-color: rgba(255, 255, 255, 0.9); /* 白色背景，带透明度 */
  border-radius: 10px; /* 圆角更大 */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* 阴影 */
  position: relative;
  z-index: 1;
}

.exercise-form {
  display: flex;
  flex-direction: column;
  gap: 24px; /* 增大表单元素之间的间距 */
}

.form-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%; /* 使表单组占满容器宽度 */
}

label {
  font-size: 18px; /* 增大标签字体大小 */
  color: #555;
  margin-bottom: 8px; /* 调整标签与输入框的间距 */
}

input {
  width: 100%; /* 输入框占满容器宽度 */
  padding: 16px; /* 增大输入框内边距 */
  border: 1px solid #ddd;
  border-radius: 8px; /* 增大输入框圆角 */
  font-size: 16px; /* 增大输入框字体大小 */
  box-sizing: border-box; /* 确保内边距和边框不增加输入框的总宽度 */
}

.submit-button {
  background-color: #007bff;
  color: white;
  padding: 16px 32px; /* 增大提交按钮的内边距 */
  border: none;
  border-radius: 8px; /* 增大按钮圆角 */
  font-size: 18px; /* 增大按钮字体大小 */
  cursor: pointer;
  transition: background-color 0.3s ease;
  margin-top: 24px; /* 增大提交按钮与上方元素的间距 */
}

.submit-button:hover {
  background-color: #0056b3;
}

/* 返回按钮样式 */
.back-button {
  position: absolute;
  top: 20px;
  left: 20px;
  padding: 12px 24px; /* 增大返回按钮的内边距 */
  background-color: #6c757d;
  color: white;
  border: none;
  border-radius: 6px; /* 增大按钮圆角 */
  font-size: 16px; /* 增大按钮字体大小 */
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.back-button:hover {
  background-color: #5a6268;
}
</style>